<template>
  <!-- 作废产品、 -->
  <el-card>
    <div>
      <div class="flexbox_row">
        <div class="flex1">
          <el-row>
            <el-col :span="24">
              <el-form :inline="true" :model="searchInfo">
                <el-form-item label="SKU:" class="mb0">
                  <el-input
                    v-model.trim="searchInfo.sku"
                    maxlength="50"
                    clearable
                    class="w200px"
                    placeholder="输入关键字查询"
                  />
                </el-form-item>
                <el-form-item class="mleft10 mb0" label="产品名称:">
                  <el-input
                    v-model.trim="searchInfo.name"
                    maxlength="50"
                    clearable
                    class="w200px"
                    placeholder="输入关键字查询"
                  />
                </el-form-item>

                <el-form-item class="mb0" label="产品:">
                  <el-select v-model="searchInfo.product_type" placeholder="请选择">
                    <el-option label="独立产品" :value="1"></el-option>
                    <el-option label="组合产品" :value="2"></el-option>
                  </el-select>
                </el-form-item>

                <!-- <el-form-item label="创建时间:"
                              prop="times"
                              class="mb0">
                  <el-date-picker v-model="searchInfo.times"
                                  type="datetimerange"
                                  class="w350px"
                                  start-placeholder="开始时间"
                                  end-placeholder="结束时间"
                                  @change="searchInfo.times = $changeTime($event)"></el-date-picker>
                </el-form-item> -->

                <el-form-item class="mb0">
                  <el-button type="primary" icon="Search" @click="getListDataHandler">查询</el-button>
                  <el-button type="warning" icon="Delete" @click="clearSearch">清空</el-button>

                  <el-dropdown class="mleft10" trigger="click" :disabled="exportXSLing" @command="OtherFu">
                    <el-button type="primary" plain>
                      其他功能<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="export" icon="el-icon-download">导出</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>

      <el-main style="padding: 0 !important">
        <div class="wh100">
          <el-table
            :data="tableDataList"
            stripe
            v-loading="loadings"
            border
            highlight-current-row
            class="wh100"
            tooltip-effect="dark"
            :height="tabelHeight(335)"
            ref="multipleTable"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column
              type="index"
              width="50"
              label="序号"
              :index="i => i + 1 + (pagingInfo.curr_page - 1) * pagingInfo.page_size"
            ></el-table-column>
            <el-table-column prop="sku" label="SKU" header-align="center" align="center" minWidth="100">
            </el-table-column>
            <el-table-column prop="name" header-align="center" align="center" label="产品名称"> </el-table-column>
            <el-table-column prop="length" header-align="center" align="center" label="长宽高 & 重量">
              <template slot-scope="scope">
                {{ `${scope.row.length} * ${scope.row.width} * ${scope.row.height} & ${scope.row.weight}` }}
              </template>
            </el-table-column>
            <el-table-column prop="category_id" header-align="center" align="center" label="品类"> </el-table-column>
            <el-table-column prop="status" header-align="center" align="center" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 1">
                  <el-tag effect="dark" type="warning">待审核</el-tag>
                </span>
                <span v-else-if="scope.row.status == 2">
                  <el-tag effect="dark" type="success">已审核</el-tag>
                </span>
              </template>
            </el-table-column>

            <!-- <cl-table-column :columns-title="tableColumn"></cl-table-column> -->

            <el-table-column label="操作" width="180" align="center" fixed="right">
              <template #default="scope">
                <el-button type="danger" icon="delete" @click="toVoid(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>

      <el-footer class="footsPadding0 flex_row_space-between">
        <div class="foot-operation">
          <el-button size="medium" type="danger" @click="toVoid" :disabled="!selectIds.length">批量删除</el-button>
        </div>

        <div>
          <cl-pagination :paging-info="pagingInfo" @size_current_change="sizeCurrentChange" />
        </div>
      </el-footer>
    </div>
  </el-card>
</template>

<script>
import ProductApi from '@/api/product.js'
import { getTruthyParams, dowloadFileResFunction } from '@/libs/common.js'
import mixins from '@/component-cl/mixins/mixins'

export default {
  name: 'Obsolete',
  mixins: [mixins],

  data() {
    return {
      exportXSLing: false,
      selectIds: [],
    }
  },

  methods: {
    /**
     * 导出
     */
    async confirmExport() {
      try {
        this.exportXSLing = true
        const RES = await ProductApi.exportProductFile(3)
        console.log(RES, '================')
        this.exportXSLing = false
        dowloadFileResFunction({ file: RES, fileName: '作废产品数据', status: RES ? 200 : 404 })
      } catch (error) {
        this.exportXSLing = false

        this.$message({
          message: '网络异常/导出失败',
          type: 'warning',
        })
      }
    },

    deleteApiHandler(ids) {
      return ProductApi.deleteObsoleteProduct(ids)
    },

    // 多选操作
    handleSelectionChange(e) {
      this.selectIds = []
      if (e && e.length) {
        e.forEach(ele => {
          this.selectIds.push(ele.id)
        })
      }
    },

    OtherFu(e) {
      if (e == 'export') {
        this.$confirm('确定导出产品信息？', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          this.confirmExport()
        })
      }
    },

    async getListDataHandler() {
      const { curr_page, page_size } = this.pagingInfo
      let params = {
        curr_page,
        page_size,
        type: 3,
      }
      params = this.filterSearchData(params)
      try {
        this.loadings = true
        const RES = await ProductApi.getProductList(params)
        console.log(RES.data)
        const { total = 0, records = [] } = RES.data || {}
        this.tableDataList = records
        this.pagingInfo.total = total
        this.selectIds = []
        this.loadings = false
      } catch (error) {
        console.log(error)
        this.loadings = false
        this.$message({
          message: '网络异常/请稍后重试',
          type: 'warning',
        })
      }
    },

    filterSearchData(params) {
      const data = getTruthyParams(this.searchInfo)

      if (data.times && data.times.length) {
        const [begin_time, end_time] = data.times
        params.begin_time = begin_time
        params.end_time = end_time
        delete data.times
      }
      return { ...data, ...params }
    },
  },

  mounted() {
    this.getListDataHandler()
  },
}
</script>
